import React, { Component } from 'react'
import './style.css'
class TabBar extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
      currentIndex : 0
    }
  }
  getCurrentIndex(index) {
    this.setState({ currentIndex: index })
    // 调用父组件传来的函数，把子组件参数(index)传给父组件
    this.props.getTabsIndex(index)
  }
  render() {
    const {title ,tabButton} = this.props
    const { currentIndex } = this.state
    return (
      <div className='tabs'>
        {title.map((item, index) => {
          return <div key={item}>
            <span onClick={e => { this.getCurrentIndex(index) }}
              className={currentIndex === index ? 'active' : ''}>
              {tabButton(item)}
            </span>
          </div>
        })
        }
      </div>
    )
  }
}

export default TabBar